<template>
  <div class="login-bg login-content">
    <d-row>
      <d-col :xs="0" :sm="0" :md="13" :lg="14" :xl="14"></d-col>
      <d-col class="main" :xs="24" :sm="24" :md="11" :lg="10" :xl="10">
        <d-card
          shadow="never"
          class="login-wrap"
        >
          <div class="admin-name">
            <div>
              <div class="sa-line-1">欢迎来到{{ appName }}!</div>
              <div class="admin-welcome">很高兴再次见到您</div>
            </div>
          </div>
          <d-form ref="loginForm" hide-required-mark :data="form" :rules="rules" layout="vertical">
            <d-form-item field="phone" >
              <d-input  class="login-input" v-model="form.phone" placeholder="请输入手机号"/>
            </d-form-item>
            <d-form-item field="password">
              <d-input  class="login-input" v-model="form.password" show-password
                       placeholder="请输入密码"/>
            </d-form-item>
            <d-form-item>
              <d-button class="login-btn" @click="loginHandler" variant="solid">
                登录
              </d-button>
            </d-form-item>
          </d-form>
        </d-card>
      </d-col>
    </d-row>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref, computed} from 'vue';
import {useRoute} from 'vue-router';
import {useAccountStore} from "@/store/modules/account";
import {useAppStore} from "@/store/modules/app";
import {LoginReq} from "@/types/modules/login";

const accountStore = useAccountStore();
const appStore = useAppStore();
const routeQuery = useRoute().query;

if (routeQuery.token) {
  accountStore.setToken(`${routeQuery.token}`);
}
const appName = computed(() => appStore.info.name);
const loginLoading = ref(false);
const loginForm = ref(null);

const form = reactive<LoginReq>({
  code: "", password: "123456", phone: "18384845460"
});

const rules = {
  phone: [{required: true, message: '手机号不能为空', trigger: 'blur'}],
  password: [{required: true, message: '密码不能为空', trigger: 'blur'}],
}

const loginHandler =  async () => {
  await loginForm.value.validate();
  accountStore.login(form);
}


</script>

<style lang="scss" scoped>
.login-content {
  height: 100%;
  color: var(--sa-subtitle);
  letter-spacing: 1px;
  background: radial-gradient(circle at 1px 1px, #E4E4E4 1px, #FDFDFD 0);
  background-size: 16px 16px;
  @media only screen and (max-width: 768px) {
    background-position: center;
  }

  .devui-row {
    height: 100%;

    .devui-col {
      display: flex;
      align-items: center;
    }

    @media only screen and (max-width: 992px) {
      .devui-col {
        justify-content: center;
      }
    }
  }

  .main {
    position: relative;
    height: 100%;
  }

  .login-wrap {
    width: 460px;
    flex-direction: column;
    padding: 56px 52px 64px;
    border-radius: 8px;
    //background: var(--sa-background-assist);
    filter: drop-shadow(0 0 16px rgba(0, 0, 0, 0.2));
    background: #fff;
    position: absolute;

    .admin-name {
      width: 100%;
      height: 112px;
      font-size: 32px;
      text-align: center;

      .admin-welcome {
        font-size: 20px;
        margin-top: 16px;
        text-align: center;
      }

      .sa-image {
        margin-bottom: 32px;
      }
    }

    .login-or {
      margin: 16px 0;
      color: var(--sa-subfont);
    }

    .login-input {
      height: 40px;
    }

    .login-btn {
      width: 100%;
      height: 40px;
    }
  }
}
</style>
